import { Colors, DateTimePicker } from "react-native-ui-lib";
import { useColor } from "@/hooks/color";
import { useTranslation } from "react-i18next";
import { useLoadedFontFamilyByAction } from "@/hooks/font";

const TaskChangeDateTime: React.FC<{
  label: React.ComponentProps<typeof DateTimePicker>["label"];
  placeContent: string;
  changeDateTimer: (date: Date) => void;
  value: Date;
  mode?: React.ComponentProps<typeof DateTimePicker>["mode"];
}> = ({ label, placeContent, changeDateTimer, value, mode }) => (
  <DateTimePicker
    migrateDialog
    containerStyle={{ marginVertical: 10, borderBottomWidth: 1, borderBottomColor: Colors.getColorTint(useColor().colors.text, 60) }}
    label={label}
    placeholderTextColor={Colors.getColorTint(useColor().colors.text, 40)}
    labelColor={Colors.getColorTint(useColor().colors.text, 50)}
    mode={mode}
    placeholder={placeContent}
    textColor={Colors.getColorTint(useColor().colors.text, 10)}
    backgroundColor={useColor().colors.background}
    cancelButtonProps={{ label: useTranslation().t("4002"), labelStyle: { color: Colors.getColorTint(useColor().color.error, 30) } }}
    confirmButtonProps={{ label: useTranslation().t("4003"), labelStyle: { color: Colors.getColorTint(useColor().color.action, 30) } }}
    minimumDate={new Date()}
    value={value}
    onChange={changeDateTimer}
    style={{ ...useLoadedFontFamilyByAction("SPACE_MONO"), fontSize: 16, color: useColor().colors.text }}
  />
);

export default TaskChangeDateTime;
